require(['./config'], () => {
    require(['template', 'header', 'footer'], (template) => {
        class Shopping {
            constructor () {
                this.init()
                if (this.cart) {
                    this.calaTotalMoney()
                    this.checksChange()
                    this.setAllCheck()
                    this.setNum()
                    this.shopDel()
                }
            }
            init () {
                const cart = localStorage.getItem('cart')
               // console.log(cart)
                const isCart = cart[1]=='{'
                if (isCart) {
                    // 渲染表格
                    this.cart = JSON.parse(cart)
                    $('#shop_tbody').html(
                        template('cartTemplate', { cart: this.cart })
                    )
                    $('#cart-empty').hide()
                } else {
                    $('#shopCart').hide()
                    $('#cart-empty').show()
                }
            }
            checksChange () {
                const _this = this
                $('.checks').on('change', function () {
                    const id = $(this).parents('tr').data('id')
                    _this.cart = _this.cart.map(shop => {
                        if(shop.id === id ) {
                            shop.check = $(this).prop('checked')
                        }
                        return shop
                    })
                    // 修改好的cart重新存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    // 重新计算一次总价
                    _this.calaTotalMoney()
                    // 重新设计全选
                    _this.setAllCheck()
                })
            }
            // 数量加减
            setNum(){
                const _this = this
                $(document).on('click','.minus', function () {
                    const id = $(this).parents('tr').data('id')
                    _this.cart = _this.cart.map(shop => {
                       if(shop.id === id) {
                           if(shop.count<=1){
                               shop.count = 1
                           }else{
                            shop.count--
                           }
                       }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calaTotalMoney()
                    _this.init()
                })
                $(document).on('click', '.plus', function () {
                    const id = $(this).parents('tr').data('id')
                    _this.cart = _this.cart.map(shop => {
                        if(shop.id === id) {
                            shop.count++
                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calaTotalMoney()
                    _this.init()
                    _this.calcCartCount()
                })
            }
            // 头部购物车数量
            calcCartCount () {
                let count = 0
                let cart = localStorage.getItem('cart')
                if (cart) {
                    cart = JSON.parse(cart)
                    count = cart.reduce((num, shop) => {
                        num += shop.count
                        return num
                    },0)
                }
                $('#Top_shopNum').html(count)
            }
            // 删除操作
            shopDel () {
                const _this = this
                $(document).on('click', '.shopDel', function(){
                    const id = $(this).parents('tr').data('id')
                    _this.cart = _this.cart.filter(shop => {
                        return shop.id !== id
                        
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calaTotalMoney()
                    _this.init()
                    _this.calcCartCount()
                })
            }
            setAllCheck () {
                const _this = this
                $('#all-check').prop('checked',this.cart.every(shop => shop.check))
                $('#all-check').on('change',function(){
                    if(this.checked){
                        $('.checks').prop('checked',true)
                    }else{
                        $('.checks').prop('checked',false)
                    }
                    _this.cart = _this.cart.map(shop => {
                        shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calaTotalMoney()
                })
            }
            calaTotalMoney () {
                const total = this.cart.reduce((money, shop) => {
                    if (shop.check) {
                        money += shop.price * shop.count
                    }
                    return money
                }, 0)
                $('#Paymoney').html(total.toFixed(2))
            }
            
        }
        new Shopping()
    })
})